<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>文档签署</title>
    <link rel="stylesheet" href="/Resources/css/public.css">
    <link rel="stylesheet" href="/Resources/css/sign.css">
</head>

<body>
    <!---------------- 头部 ---------------->
    <div class="head">
        <div class="logo">
            <a href="javascript:;">
                <img src="/Resources/images/logo.png" alt="">
            </a>
        </div>
        <div class="tab">
            <ul>
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li class='active'>
                    <a href="document.html">文档管理 </a>
                </li>
                <li>
                    <a href="index.html">用户中心</a>
                </li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="请输入搜索内容">
            <i class='icon icon-search'></i>
        </div>
        <div class="account">
            <div class="title">
                <i class='icon icon-account'></i>
                <span>
                    章娟秀
                </span>
                <i class='icon-title-arrow'></i>
            </div>
            <div class="list-wrap none">
                <div class="list-wrap-inner">
                    <i class='icon-list-arrow'></i>
                    <ul>
                        <li>
                            <a href="javascript:;">
                    修改信息
                    </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                    修改密码
                    </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                    退出
                    </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!---------------- 主要区域 ---------------->
    <div class="main">
        <div class="totop">
            <i class='icon icon-totop'></i>
        </div>
        <div class="file-wrap">
            <div class="file w1200">
                <div class="file-left">
                    <div class="file-left-name">
                        <i class='icon icon-form-word'></i> 上海悠正网络科技技术服务合同
                    </div>
                    <div class="file-left-infor">
                        <div class="infor-section">
                            <i class='icon icon-infor-user'></i>
                            <span class='title'>
                            发起人：
                        </span> 孙桂华
                        </div>
                        <div class="infor-section">
                            <i class='icon icon-infor-calendar'></i>
                            <span class='title'>
                            发起时间：
                        </span> 2017-09-01
                        </div>
                    </div>
                </div>
                <div class="file-right">
                    <button class='bt-agree bt-blue'>
                        <i class='icon icon-infor-agree'></i> 同意签署
                    </button>
                    <button class='bt-refuse bt-gray'>
                        拒绝签署
                    </button>
                </div>
            </div>
            <div class="file-success w1200 none">
                <div class="file-left">
                    <div class="file-left-name">
                        <i class='icon icon-form-word'></i> 上海悠正网络科技技术服务合同
                    </div>
                    <div class="file-left-infor">
                        <div class="infor-section">
                            <i class='icon icon-infor-user'></i>
                            <span class='title'>
                            发起人：
                        </span> 孙桂华
                        </div>
                        <div class="infor-section">
                            <i class='icon icon-infor-calendar'></i>
                            <span class='title'>
                            发起时间：
                        </span> 2017-09-01
                        </div>
                        <div class="infor-section">
                            <i class='icon icon-infor-yellow-user'></i>
                            <span class='title'>
                            签署人：
                        </span> 孙桂华
                        </div>
                        <div class="infor-section">
                            <i class='icon icon-infor-yellow-calendar'></i>
                            <span class='title'>
                            签署时间：
                        </span> 2017-09-01
                        </div>
                        <div class="infor-section">
                            <i class='icon icon-infor-state'></i>
                            <span class='title'>
                            状态：
                        </span> 已签署
                        </div>
                    </div>
                </div>
                <div class="file-right">
                    <button class='bt-blue'>
                        <a href="javascript:;">
                        <i class='icon icon-infor-download'></i> 下载此文档
                    </a>
                    </button>
                </div>
            </div>
        </div>
        <div class="word-wrap box w1200">
            <i class='icon icon-infor-sign-success none'>
                签署成功
            </i>
            <div class="slick">
                <div class="img-section" id='word-img1'>
                    <img src="/Resources/images/word1.jpg" alt="" class='word-img'>
                    <img src="/Resources/images/seal.jpg" alt="" class='seal'>
                </div>
                <div class="img-section" id='word-img2'>
                    <img src="/Resources/images/word2.jpg" alt="" class='word-img'>
                </div>
                <div class="img-section border0" id='word-img3'>
                    <img src="/Resources/images/word2.jpg" alt="" class='word-img'>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <ul>
            <li class='active word-img1'>
                <a href="javascript:;">
                    <i class='icon icon-bottom-file'>
                    1
                </i>
                </a>
            </li>
            <li class='word-img2'>
                <a href="javascript:;">

                <i class='icon icon-bottom-file'>
                    2
                </i>
                </a>
            </li>
            <li class='javascript:;'>
                <a href="javascript:;">

                <i class='icon icon-bottom-file'>
                    3
                </i>
                </a>
            </li>
        </ul>
    </div>
    <!-------------- 同意签署弹窗 -------------->
    <div class="layer-agree none">
        <div class="layer-title">
            确认签署
            <i class='icon icon-close'></i>
        </div>
        <div class="agree-content">
            <i class='icon icon-lamp'></i>
            <p>
                确认签署后会自动在签字处签署文件 此操作无法撤销，是否确认？
            </p>
        </div>
        <div class="layer-button">
            <button class='bt-sure'>
                确认
            </button>
            <button class='bt-cancel'>
                取消
            </button>
        </div>
    </div>
    <!-------------- 拒绝签署弹窗 -------------->
    <div class="layer-refuse none">
        <div class="layer-title">
            拒绝签署
            <i class='icon icon-close'></i>
        </div>
        <div class="refuse-content">
            <p>
                拒绝签署后无法撤销，是否确认？
            </p>
            <div class="textarea">
                <textarea placeholder="请输入拒绝备注..."></textarea>
            </div>
        </div>
        <div class="layer-button">
            <button class='bt-sure'>
                确认
            </button>
            <button class='bt-cancel'>
                取消
            </button>
        </div>
    </div>
</body>
<script src="/Resources/js/jquery.min.js"></script>
<script src="/Resources/layer/layer.min.js"></script>
<script src="/Resources/js/placeholder.js"></script>
<script src="/Resources/js/slick.js"></script>
<script src="/Resources/js/public.js"></script>
<script src="/Resources/js/sign.js"></script>
<script>
$('.slick').slick({
    arrows: false
});
</script>

</html>